import Image from "@/components/base/Image"
import { css } from "@emotion/react"
import { ButtonConfirm } from "./components/common"
import KycPageSignals from "@/features_signal/kycPageSignals"

export default function StepKycSelfieGuide() {
    return (
        <div
            css={css`
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                background-color: #ffffff;
                box-sizing: border-box;
            `}
        >
            <Image
                css={css`
                    width: 100%;
                `}
                src="kyc/selfie_id_intro.webp"
                alt="selfie_id_intro"
            />
            <ButtonConfirm
                css={css`
                    margin: 0 24rem;
                    margin-top: auto;
                `}
                onClick={() => {
                    KycPageSignals.nextStage()
                }}
            >
                OK, I’m ready
            </ButtonConfirm>
        </div>
    )
}
